<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">全部投票</div>
    <div class="lesson-list">
      <scroll-container ref="scrollContainer">
        <multiList @scrollTo="scrollTo" :groupDatas="groupData" :groupOffset="0">
          <div class="item-list">
            <div
              v-for="(item, index) in groupData.dataArr[0].data"
              :key="index"
              :class="{active: groupData.focArr[0][index]}"
              class="con"
            >
              <img :src="item.img.fhd" class="cover" alt>
              <span v-if="item.status" class="voter-status processing">进行中</span>
              <span v-else class="voter-status">{{closed(item.more) }}</span>
              <p :data-index="'tar_0_'+index" class="voter-title">{{item.name}}</p>
            </div>
          </div>
        </multiList>
      </scroll-container>
    </div>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312
  },
  methods: {
    closed: function(obj) {
      // console.log(obj);
      if (obj.closed === 1) {
        return "未开始";
      } else if (obj.closed === 2) {
        return "进行中";
      } else if (obj.closed === 2) {
        return "已结束";
      } else {
        return "未知";
      }
    },
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    getData() {
      this.hs.ajax.get(
        "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=10",
        data => {
          data = JSON.parse(data);
          //console.log(data);
          if (data.head.code === 1) {
            let listSize = data.body.listSize;
            this.hs.ajax.get(
              "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&pageNum=1&pageSize=" +
                listSize +
                "&schoolId=" +
                this.$store.state.school.id,
              data => {
                data = JSON.parse(data);
                //console.log(data);
                if (data.head.code === 1) {
                  this.groupData.dataArr[0].data = data.body;
                }
              },
              0,
              function(msg) {},
              3000
            );
          }
        },
        0,
        function(msg) {},
        3000
      );
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    this.hs.initFocus("0-0");

    // 处理所有点击逻辑
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      this.setBackObj({ backFocArr: [this.hs.focObj.objid] });
      if (group === 0) {
        this.$router.push("/xyfc/voter/" + objindex);
      }
    });

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      //console.log(JSON.stringify(focArr));
      this.hs.initFocus(focArr[0]);
    }

    this.bridge.whenKeyBack = () => {
      this.$router.push("/xyfc");
    };
  },
  data() {
    return {
      groups: [0],
      scrollY: 0,
      backObjName: "voter-all",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      groupData: {
        dataArr: [
          {
            maxLine: 2,
            dynamic: false,
            title: "华数课堂",
            data: []
          }
        ],
        focArr: [[]]
      }
    };
  }
};
</script>
<style lang="less" scoped>
.main {
  position: relative;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .title {
    position: absolute;
    top: 77px;
    right: 121px;
    font-size: 60px;
    color: #e8e8e8;
  }
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .lesson-list {
    margin-top: 184px;
    margin-left: 72px;
    width: 1848px;
    overflow: hidden;
    .item-list {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      padding-top: 30px;
      .con {
        margin-left: 48px;
        position: relative;
        overflow: hidden;
        width: 816px;
        height: 328px;
        margin-bottom: 48px;
        background-color: #74c1e5;
        border-radius: 8px;
        .cover {
          width: 100%;
          height: 100%;
        }
        .voter-title {
          position: absolute;
          bottom: 25px;
          left: 22px;
          width: 100%;
          font-size: 36px;
          color: #ffffff;
        }
        .voter-status {
          right: 8px;
          top: 8px;
          position: absolute;
          width: 67px;
          height: 28px;
          line-height: 28px;
          background-color: #000;
          border-radius: 4px;
          color: #fff;
          font-size: 20px;
          text-align: center;
        }
        .processing {
          background-color: #ed860d;
        }
      }
      .t_bg {
        position: absolute;
        left: 0px;
        top: 158px;
        width: 384px;
        height: 56px;
        background-color: #000000;
        opacity: 0.7;
        border-bottom-right-radius: 9px;
        border-bottom-left-radius: 9px;
      }

      .t_move {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 356px;
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .sub_title {
        position: absolute;
        left: 0px;
        top: 238px;
        width: 384px;
        height: 30px;
        .name,
        .time {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 192px;
          height: 30px;
          line-height: 30px;
          font-size: 30px;
        }
        .time {
          left: 192px;
          text-align: right;
        }
      }
    }
    .content {
      height: 896px;
      overflow: hidden;
    }
  }
  .active {
    border: 2px solid #ffffff;
    background: #0e60e9 !important;
    color: #fff !important;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}
</style>
